@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;400;700&display=swap');


:root {
    --poppins: 'Poppins', sans-serif;
    --lato: 'Lato', sans-serif;
}

body {
    /* background-image: url('../image/Background.jpg');
    background-repeat: repeat;
    background-size: cover; */
    background-color: #fcfcfc;
    height: 100%;
    font-family: 'Josefin Sans', sans-serif;
    color: black;
}

body #header {
    text-align: center;
}

.banner {
    background-image: url('../image/backgroundbanner.jpeg');
    background-repeat: repeat;
    background-size: cover;
    height: 150px;
}

.box-information {
    /* background: rgba(255, 255, 255, 0.3); */
    background-color: white;
    box-shadow: 0 5px 5px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(12.5px);
    -webkit-backdrop-filter: blur(12.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 30px;
}

.box-information:hover {
    background: rgba(255, 255, 255, 0.3);
    /* background-color: #f4f4f4; */
    box-shadow: 0 5px 5px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(12.5px);
    -webkit-backdrop-filter: blur(12.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 30px;
}

a.text-button-a {
    color: black;
    text-decoration: none;
}

a .card-body {
    color: black;
    text-decoration: none;
}

a:hover .card-body {
    color: #141414;
    font-size: medium;
    color: #333399;
    text-decoration: none;
    /* font-weight: bold; */
}

.glow {
    font-size: 32px;
    color: #fcfcfc;
    text-align: center;
    /* animation: glow 1s ease-in-out infinite alternate; */
}

/* @-webkit-keyframes glow {
    from {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #1200b4d7, 0 0 20px #2c21c9d0, 0 0 25px #2c21c9d0, 0 0 30px #2c21c9d0, 0 0 35px #2c21c9d0;
    }

    to {
        text-shadow: 0 0 10px #fff, 0 0 15px #1200b4d7, 0 0 20px #1200b4d7, 0 0 25px #1200b4d7, 0 0 30px #1200b4d7, 0 0 35px #1200b4d7, 0 0 40px #1200b4d7;
    }
} */

div img {
    max-height: fit-content;
    display: block;
}

.sosmed_icon a {
    color: #ffffff;
    text-decoration: none;
}

.sosmed_icon a:hover {
    text-decoration: none;
    color: #808080;
}

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    /* margin-left: 30px;
    margin-top: 5px; */
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }    
}

.floating-reverse {  
    animation-name: floating-reverse;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    /* margin-left: 30px;
    margin-top: 5px; */
}
 
@keyframes floating-reverse {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, -5px); }
    100%   { transform: translate(0, -0px); }    
}

#content {
    /* overflow-y: auto; */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--top-mask-size, 0px), black calc(100% - var(--bottom-mask-size, 0px)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black var(--top-mask-size, 0px), black calc(100% - var(--bottom-mask-size, 0px)), transparent 100%);
    --top-mask-size: 0px;
    --bottom-mask-size: 0px;
}

#content.is-top-overflowing {
    --top-mask-size: 48px !important;
}

#content.is-bottom-overflowing {
    --bottom-mask-size: 48px !important;
}

.hover-to-show-link:hover .hris-title {
    color: #333399;
}

/* .hover-to-show-link:hover, .hover-to-show-link-penkar:hover, .hover-to-show-link-tanyahrd:hover {
    border: 1px solid lightgray;
    border-radius: 5px;
} */

.hover-to-show-link-penkar:hover .penkar-title {
    color: #333399;
}

.hover-to-show-link-tanyahrd:hover .tanyahrd-title {
    color: #333399;
}

.hover-to-show-link-orangease:hover .orangease-title {
    color: #333399;
}

.hover-to-show-link-assessment:hover .assessment-title {
    color: #333399;
}

.hover-to-show-link-elearning:hover .elearning-title {
    color: #333399;
}